<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <th:block th:replace="admin/common :: heads"></th:block>
</head>
<body class="sidebar-fixed header-fixed">
<div class="page-wrapper">
    <th:block th:replace="admin/common :: navbar"></th:block>

    <div class="main-container">
        <th:block th:replace="admin/common :: sidebar"></th:block>

            <div class="content">
                <div class="row">
                    <div class="col-md-12">
                            <div class="card-body">
                                <div class="mb-4">
                                    <section class="forms">
                                        <div class="col-lg-12">
                                            <div class="card">
                                                <div class="card-close">
                                                    <div class="dropdown">
                                                        <!-- button type="button" id="closeCard5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-ellipsis-v"></i></button-->
                                                        <!-- div aria-labelledby="closeCard5" class="dropdown-menu dropdown-menu-right has-shadow"><a href="#" class="dropdown-item remove"> <i class="fa fa-times"></i>Close</a><a href="#" class="dropdown-item edit"> <i class="fa fa-gear"></i>Edit</a></div -->
                                                    </div>
                                                </div>
                                                <div class="card-header d-flex align-items-center">
                                                    <h3 class="h4">Setting form</h3>
                                                </div>
                                                <div class="card-body">
                                                    <div class="form-horizontal">
                                                        <div class="form-group row">
                                                            <label class="col-sm-3 form-control-label">Fine</label>
                                                            <div class="col-sm-9">
                                                                <input id="fine" type="number" class="form-control">
                                                                <small class="help-block-none">Modify book fine value. (default: 1 yuan/ day)</small>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="line"></div>
                                                        <div class="form-group row">
                                                            <label class="col-sm-3 form-control-label">Period</label>
                                                            <div class="col-sm-9">
                                                                <input id="period" type="number" class="form-control">
                                                                <small class="help-block-none">Modify book return period. (default: 30 days)</small>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="line"></div>
                                                        <div class="form-group row">
                                                            <label class="col-sm-3 form-control-label">deposit</label>
                                                            <div class="col-sm-9">
                                                                <input id="deposit" type="number" class="form-control">
                                                                <small class="help-block-none">Modify reader security deposit. (default: 300 yuan)</small>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="line"></div>
                                                        <div class="form-group row">
                                                            <div class="col-sm-4 offset-sm-3">
                                                                <button class="btn btn-secondary">Cancel</button>
                                                                <button id="submit" class="btn btn-primary">Save changes</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>

                                    </div>


                                </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

<th:block th:replace="admin/common :: scripts"></th:block>

<script>
    $("#logout").bind("click", function () {
        $.ajax({
            url: "/api/user/token",
            type: "DELETE",
            success: function (resp) {
                console.log(resp);
            }
        });
        window.location.href="login.html";
    });
</script>


<script>
    function bindValue(id) {
        $.ajax({
            url: "/api/setting/"+id,
            type: "GET",
            dataType: "json",
            success: function (resp) {
                $("#"+id).attr("value", resp.data.value);
            },
            error: function (resp) {
                alert(resp.message);
            }
        })
    }

    bindValue("fine");
    bindValue("deposit");
    bindValue("period");

    $("#submit").bind("click", function () {
        let formData = new FormData();
        formData.append("fine", $("#fine").val());
        formData.append("deposit", $("#deposit").val());
        formData.append("period", $("#period").val());

        $.ajax({
            url: "/api/setting/",
            type: "PUT",
            data: formData,
            processData: false,
            contentType: false,
            success: function (resp) {
                alert("success");
            },
            error: function (resp) {
                alert(resp.message);
            }
        });
    })
</script>
    </body>
</html>
